<template>
	<view class="page">
		<Navbar fixed statusBar leftIcon="back" title="" backgroundColor="transparent" color="white"></Navbar>
		<image mode="widthFix" class="bg-img" src="https://jinzhubaobao.oss-cn-beijing.aliyuncs.com/img/product/20201208/vc-upload-1607391526538-2.png"></image>
		<view class="container">
			<view class="tui-dot" :class="['tui-dot-' + (index + 1)]" v-for="(item, index) in circleList" :key="index"></view>
			<view class="tui-container-in">
				<view class="tui-content-out" :class="['tui-award-' + (index + 1), index == indexSelect ? 'tui-awardSelect' : '']" v-for="(item, index) in awardList" :key="index">
					<image v-if="item.awardImg" :src="item.awardImg" mode=""></image>
					<image v-else src="/static/icons/mine_btn_yaoqing.png" mode=""></image>
					<view>{{ item.awardName }}</view>
				</view>
				<view class="tui-btn-start" :class="[isRunning ? 'tui-ative' : '']" @tap="startDrawing">立即抽奖</view>
			</view>
		</view>
		<view v-if="type == 'integral'" class="tip">您的剩余积分为：{{ detail.integralBalance }}</view>
		<view v-else class="tip">可抽奖次数：{{ canPlayNum }}</view>
		<tui-modal @cancel="awardShow = false" backgroundColor="rgba(0, 0, 0, 0)" :show="awardShow" :custom="true">
			<view class="modal-content">
				<image src="/static/icons/159525531287971473.png" mode=""></image>
				<view class="title">{{ awardContent.title }}</view>
				<image v-if="awardContent.img" class="img" :src="awardContent.img"></image>
				<image v-else class="img" src="/static/icons/mine_btn_yaoqing.png"></image>
				<view class="desc">{{ awardContent.content }}</view>
				<view v-if="" @click="awardShow = false" class="button">{{ awardContent.buttonTitle }}</view>
				<!-- <view @click="awardShow = false" class="button">开心收下</view> -->
			</view>
		</tui-modal>
		<Loading v-if="loading" type="img"></Loading>
		<!-- <tui-fab @click="navTo" bgColor="#fc9264" custom><view style="font-size: 23upx;">我的账户</view></tui-fab> -->
	</view>
</template>

<script>
import Navbar from '@/components/Navbar.vue';
import { spinWinDetail, spinWinAccountDetail, luckyDraw } from '@/service/spinwin.js';

export default {
	components: {
		Navbar
	},
	data() {
		return {
			circleList: 24, //圆点
			awardShow: false,
			awardContent: { img: '' },
			awardList: [], //奖品数组
			indexSelect: 0, //被选中的奖品index
			isRunning: false, //是否正在抽奖,
			type: '',
			canPlayNum: 0,
			detail: {},
			loading: true
		};
	},
	onLoad(options) {
		if (options.id || options.item) {
			this.item = options.id ? { id: options.id } : JSON.parse(options.item);
			this.loading = true;
			spinWinDetail({ id: this.item.id }).then(v => {
				this.loading = false;
				this.awardList = v.spinWinAwardVoList;
				const index = 8 - this.awardList.length;
				if (index > 0) {
					for (var j = 0; j < index; j++) {
						console.log(index);
						this.awardList.push({ awardName: '谢谢参与' });
					}
				}
			});
		}
		console.log(options);
		this.type = options.spinWinType;
		this.raffleTicketName = options.raffleTicketName;
		this.getUserDetail(options.raffleTicketName);
	},
	methods: {
		async getUserDetail(raffleTicketName) {
			this.detail = await spinWinAccountDetail();
			if (this.type == 'raffleTicket') {
				if (this.detail.userRaffleTicketAccountVos.length) {
					const item = this.detail.userRaffleTicketAccountVos.find(v => v.raffleTicketName == raffleTicketName);
					this.canPlayNum = item.num || 0;
				} else {
					this.canPlayNum = 0;
				}
			}
		},
		navTo() {
			uni.navigateTo({
				url: 'account/account'
			});
		},
		//获取随机数
		getRandom: function(u) {
			let rnd = Math.random() > 0.5 ? '2' : '1';
			u = u || 3;
			for (var i = 0; i < u; i++) {
				rnd += Math.floor(Math.random() * 10);
			}
			return Number(rnd);
		},
		//开始抽奖
		async startDrawing() {
			if (this.isRunning) return;
			this.isRunning = true;
			let indexSelect = 0;
			let i = 0;
			let randomNum = this.getRandom(3);
			try {
				let resp = null;
				// let catchFlag = false;

				let timer = setInterval(() => {
					++indexSelect;
					//这里用y=30*x+150函数做的处理.可根据自己的需求改变转盘速度
					indexSelect = indexSelect % 8;
					this.indexSelect = indexSelect;
					i += 40;
					if (i > randomNum) {
						//去除循环
						clearInterval(timer);
						timer = null;
						//获奖提示
						if (resp) {
							this.indexSelect = this.awardList.findIndex(v => v.id == resp);
							// uni.showModal({
							// 	title: '恭喜您',
							// 	content: '获得了奖品:' + award.awardName + '*' + award.awardUnitNum,
							// 	confirmColor: '#5677FC',
							// 	showCancel: false, //去掉取消按钮
							// 	success: res => {
							// 		if (res.confirm) {
							// 			this.isRunning = false;
							// 		}
							// 	}
							// });
							const item = this.awardList[this.indexSelect];
							this.awardContent = {
								title: '中奖啦',
								content: item.awardName,
								img: item.awardImg,
								buttonTitle: '开心收下'
							};
						} else {
							this.indexSelect = this.awardList.findIndex(v => !v.id);
							this.awardContent = {
								title: '谢谢参与',
								content: '请再接再励',
								buttonTitle: '重新抽奖'
							};
							// uni.showModal({
							// 	title: '谢谢参与',
							// 	// content: '',
							// 	confirmText: '再接再厉',
							// 	confirmColor: '#5677FC',
							// 	showCancel: false, //去掉取消按钮
							// 	success: res => {
							// 		if (res.confirm) {
							// 			this.isRunning = false;
							// 		}
							// 	}
							// });
						}
						this.awardShow = true;
						this.isRunning = false;
					}
				}, 50 + i);
				luckyDraw({ id: this.item.id })
					.then(v => {
						resp = v;
						this.getUserDetail(this.raffleTicketName);
					})
					.catch(() => {
						// catchFlag = true;
						clearInterval(timer);
						timer = null;
						this.isRunning = false;
					});
			} catch (e) {
				console.log(e);
				//TODO handle the exception
			} finally {
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.bg-img {
	width: 750upx;
	position: relative;
	// z-index: -1;
}
.page {
	font-size: 0;
	background-color: #fc4034;
}
.container {
	height: 667rpx;
	width: 665rpx;
	background-color: #fc4034;
	-webkit-border-radius: 20px;
	border-radius: 40rpx;
	-webkit-box-shadow: 0 10px 0 #d80014;
	box-shadow: 0 10px 0 #d80014;
	position: absolute;
	top: 607rpx;
	left: 45rpx;
	z-index: 10;
}

.tui-container-in {
	width: 580rpx;
	height: 530rpx;
	background-color: #d80014;
	border-radius: 40rpx;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

/**小圆点 start*/

.tui-dot {
	position: absolute;
	display: block;
	border-radius: 50%;
	height: 20rpx;
	width: 20rpx;
}

.tui-dot:nth-child(odd) {
	background: #fff;
	animation: 0.5s odd linear infinite;
}

.tui-dot:nth-child(even) {
	background: #fcf400;
	animation: 0.5s even linear infinite;
}

.tui-dot-1 {
	left: 15rpx;
	top: 15rpx;
}

.tui-dot-2 {
	left: 117.5rpx;
	top: 7.5rpx;
}

.tui-dot-3 {
	left: 220rpx;
	top: 7.5rpx;
}

.tui-dot-4 {
	left: 322.5rpx;
	top: 7.5rpx;
}

.tui-dot-5 {
	left: 425rpx;
	top: 7.5rpx;
}

.tui-dot-6 {
	left: 527.5rpx;
	top: 7.5rpx;
}

.tui-dot-7 {
	left: 620rpx;
	top: 15rpx;
}

.tui-dot-8 {
	left: 622rpx;
	top: 109rpx;
}

.tui-dot-9 {
	left: 622rpx;
	top: 203rpx;
}

.tui-dot-10 {
	left: 622rpx;
	top: 297rpx;
}

.tui-dot-11 {
	left: 622rpx;
	top: 391rpx;
}

.tui-dot-12 {
	left: 622rpx;
	top: 485rpx;
}

.tui-dot-13 {
	left: 620rpx;
	top: 565rpx;
}

.tui-dot-14 {
	left: 517.5rpx;
	top: 572rpx;
}

.tui-dot-15 {
	left: 415rpx;
	top: 572rpx;
}

.tui-dot-16 {
	left: 312.5rpx;
	top: 572rpx;
}

.tui-dot-17 {
	left: 210rpx;
	top: 572rpx;
}

.tui-dot-18 {
	left: 107.5rpx;
	top: 572rpx;
}

.tui-dot-19 {
	left: 15rpx;
	top: 565rpx;
}

.tui-dot-20 {
	left: 7.5rpx;
	top: 471rpx;
}

.tui-dot-21 {
	left: 7.5rpx;
	top: 377rpx;
}

.tui-dot-22 {
	left: 7.5rpx;
	top: 283rpx;
}

.tui-dot-23 {
	left: 7.5rpx;
	top: 189rpx;
}

.tui-dot-24 {
	left: 7.5rpx;
	top: 95rpx;
}

@-webkit-keyframes odd {
	0% {
		background: #fff;
	}

	100% {
		background: #fcf400;
	}
}

@keyframes odd {
	0% {
		background: #fff;
	}

	100% {
		background: #fcf400;
	}
}

@-webkit-keyframes even {
	0% {
		background: #fcf400;
	}

	100% {
		background: #fff;
	}
}

@keyframes even {
	0% {
		background: #fcf400;
	}

	100% {
		background: #fff;
	}
}

/**小圆点 end*/

.tui-content-out {
	position: absolute;
	height: 150rpx;
	width: 168rpx;
	background-color: #fcecec;
	border-radius: 15rpx;
	box-shadow: 0 4px 0 #fcc8d0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	image {
		height: 80upx;
		width: 80upx;
	}
	view {
		font-size: 26upx;
		color: #000000;
	}
}

/* 580 530  */

.tui-award-1 {
	left: 24rpx;
	top: 24rpx;
}

.tui-award-2 {
	left: 206rpx;
	top: 24rpx;
}

.tui-award-3 {
	left: 388rpx;
	top: 24rpx;
}

.tui-award-4 {
	left: 388rpx;
	top: 188rpx;
}

.tui-award-5 {
	left: 388rpx;
	top: 352rpx;
}

.tui-award-6 {
	left: 206rpx;
	top: 352rpx;
}

.tui-award-7 {
	left: 24rpx;
	top: 352rpx;
}

.tui-award-8 {
	left: 24rpx;
	top: 188rpx;
}

/**居中 加粗*/

.tui-btn-start {
	position: absolute;
	top: 188rpx;
	left: 206rpx;
	border-radius: 15rpx;
	height: 150rpx;
	width: 168rpx;
	background-color: #fc4034;
	box-shadow: 0 4px 0 #fcc8d0;
	color: #fcf400;
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	line-height: 150rpx;
}

.tui-ative {
	opacity: 0.6 !important;
}

.tui-award-image {
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	height: 134rpx;
	width: 134rpx;
}

.tui-awardSelect {
	background-color: #fcf400 !important;
	box-shadow: 0 4px 0 rgb(240, 208, 12) !important;
}
.modal-content {
	position: relative;
	image {
		position: relative;
		left: -82upx;
		width: 684upx;
		bottom: 40upx;
		height: 742upx;
	}
	.img {
		position: absolute;
		top: 220upx;
		z-index: 1;
		width: 160upx;
		height: 160upx;
		left: 0;
		text-align: center;
		right: 0;
		margin: 0 auto;
		color: #fff;
		font-size: 48upx;
	}
	.button {
		position: absolute;
		top: 564upx;
		z-index: 1;
		width: 228upx;
		line-height: 62upx;
		text-align: center;
		background: linear-gradient(to right, #fbdd7d, #fdeaea);
		height: 62upx;
		border-radius: 40upx;
		left: 0;
		text-align: center;
		right: 0;
		margin: 0 auto;
		color: #ca0000;
		font-weight: 500;
		font-size: 30upx;
	}
	.title {
		position: absolute;
		top: 140upx;
		z-index: 1;
		left: 0;
		text-align: center;
		right: 0;
		margin: 0 auto;
		color: #fff;
		font-size: 48upx;
	}

	.desc {
		position: absolute;
		top: 400upx;
		width: 400upx;
		z-index: 1;
		left: 0;
		text-align: center;
		right: 0;
		margin: 0 auto;
		color: #fff;
		font-size: 60upx;
	}
}
.tip {
	position: absolute;
	top: 1214upx;
	width: 400upx;
	z-index: 10;
	left: 0;
	text-align: center;
	right: 0;
	margin: 0 auto;
	color: #e2e0e0;
	font-size: 34upx;
}
</style>
